<template>
<!-- 面试技巧 -->
   <div class="dashboard-container">
    <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="18">
          <!-- 搜索 -->
          <el-form :inline="true" :model="paramsInfo" ref="searchForm">
          <div class="filter-container">
            <!-- 关键字查找输入框 -->
            <el-form-item prop="keyword" label="关键字">
              <el-input
                style="width: 200px;"
                placeholder="根据文章标题搜索"
                class="filter-item"
                v-model="paramsInfo.keyword"
                size="small"
              ></el-input>
            </el-form-item>
            <!-- 下拉框 -->
            <el-form-item label="状态" prop="state" style="margin-left:26px">
              <el-select v-model="paramsInfo.state" placeholder="请选择" size="small">
                <el-option v-for="item in status" :key="item.id"
                 :label="item.value"
                 :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
               <el-button
                size="small"
                @click="reset"
              >清除</el-button>
              <el-button
               size="small"
                type="primary"
                @click="search"
              >搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
        </el-col>
        <el-col :span="6" style="text-align:right">
           <el-button type="success" icon="el-icon-edit" size="small" @click="add(1)">新增技巧</el-button>
        </el-col>
      </el-row>
      <!-- 带有提示性的文字 -->
      <el-alert v-if="true"  type="info" class="alert" :closable='false' show-icon :title="alertText"></el-alert>
      <!-- 表格 -->
      <el-table
      :data="tableData.items"
      style="width: 100%;margin-top:10px"
      v-loading="loading"
      :header-cell-style="{background:'#fafafa'}"
     >
        <el-table-column
            type="index"
            label="序号">
        </el-table-column>
        <el-table-column
        prop="title"
        label="文章标题"
        width="180" >
        <template #default="{row}">
          <!-- {{row}} -->
          {{row.title}}
        <a href="#"  class="el-icon-film" style="color:blue" v-if="row.videoURL?true:false" @click="playVideo(row.videoURL)"></a>
        </template>
        </el-table-column>
        <el-table-column
        prop="visits"
        label="阅读数">
        </el-table-column>
        <el-table-column
        prop="username"
        label="录入人"
        width="180">
        </el-table-column>
        <el-table-column
        prop="createTime"
        label="录入时间"
        width="180">
        <template #default="{row}">
              {{ row.createTime | parseTimeByString }}
            </template>
        </el-table-column>
        <el-table-column
            prop="state"
            :formatter="setState"
            label="状态">
        </el-table-column>
        <el-table-column
        label="操作" fixed="right" width="240px" align="center">
        <template #default="{row}">
        <el-button type="text" size="small" @click="preView(row.id)">预览</el-button>
        <el-button type="text" size="small" @click="checkStatus(row.id,row.state)">{{row.state===1?'禁用':'启用'}}</el-button>
        <el-button type="text" size="small" :disabled="row.state===1?true:false" @click="add(2,row.id)">修改</el-button>
        <el-button type="text" size="small" :disabled="row.state===1?true:false" @click="delArticle(row.id)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:5px">
        <!-- 分页 -->
         <el-row type="flex" justify="end">
                <el-pagination
                    background
                    :current-page="params.page"
                    :page-size="params.pagesize"
                    :page-sizes="[5,10,20,50]"
                    layout="prev, pager, next,sizes,jumper"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="changeSize">
                </el-pagination>
            </el-row>
      </el-row>
    </el-card>
    <articlesAdd :addDialogIsShow.sync="addDialogIsShow" :dialogTitle="dialogTitle" :formData.sync="formData" @getArticleList="getArticleList" :params="params"></articlesAdd>
    <articlesPreview :preDialogIsShow.sync="preDialogIsShow" :articleData="articleData"></articlesPreview>
    <div class="video-preview" v-if="videoIsShow">
      <div class="close">
        <span class="el-icon-close" @click="closePreVideo"></span>
      </div>
      <div class="box">
        <video :src="videoURL" autoplay></video>
      </div>
    </div>
    </div>
     </div>
</template>

<script>
// import PageTool from '@/module-dashboard/components/pageTool.vue'
import { list, changeState, remove, detail } from '@/api/hmmm/articles.js'
import { simple } from '@/api/base/users.js'
import EmploeeEnum from '@/api/base/baseApi.js'
import articlesAdd from '../components/articles-add.vue'
import articlesPreview from '../components/articles-preview.vue'

export default {
  components: {
    articlesAdd,
    articlesPreview
  },
  data () {
    return {
      alertText: '',
      status: EmploeeEnum.status,
      tableData: [],
      // value: '',
      loading: false,
      total: null,
      params: {
        page: 1, // 当前页
        pagesize: 10 // 每页显示条目个数
      },
      addDialogIsShow: false,
      dialogTitle: '',
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      preDialogIsShow: false,
      articleData: {},
      videoIsShow: false,
      videoURL: '',
      paramsInfo: {
        page: 1, // 当前页
        pagesize: 10 // 每页显示条目个数
      }
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 渲染页面
    async getArticleList () {
      this.loading = true
      const { data } = await list(this.params)
      this.loading = false
      this.tableData = data
      this.total = data.counts
      this.alertText = `数据一共 ${this.total} 条`
    },
    // 枚举状态
    setState (row) {
      const obj = this.status.find(item => item.id === String(row.state))
      // console.log(obj)
      return obj?.value ? obj?.value : '未知'
    },
    // 分页
    // 改变当前页
    handleCurrentChange (page) {
      // page当前点击的页数
      this.params.page = page
      this.getArticleList()
    },
    changeSize (size) {
      // 当前页面显示的
    //   console.log(size)
      this.params.pagesize = size
      this.params.page = 1
      this.getArticleList(this.params)
    },
    // 改变状态
    async checkStatus (id, state) {
      try {
        if (state === 0) {
          state = 1
        } else {
          state = 0
        }
        await changeState({ id, state })
        await this.getArticleList()
        this.$message.success('更新成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    async delArticle (id) {
    //   console.log(id)
      try {
        await this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id })
        const totalPage = Math.ceil((this.total - 1) / this.params.pagesize)
        this.params.page = this.params.page > totalPage ? totalPage : this.params.page
        this.params.page = this.params.page < 1 ? 1 : this.params.page
        await this.getArticleList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 新增
    async add (type, id) {
      this.addDialogIsShow = true
      if (type === 1) {
        this.dialogTitle = '新增文章'
      } else {
        this.dialogTitle = '修改文章'
        const { data } = await detail({ id })
        this.formData = data
      }
    },
    // 预览
    async preView (id) {
      // 显示弹窗
      this.preDialogIsShow = true
      //   请求文章预览
      const { data } = await detail({ id })
      //   console.log(data)
      const { data: userList } = await simple()
      //   console.log(userList)
      // 匹配录入人
      const { username } = userList.find(item => { return item.id === data.creatorID })

      this.articleData = data
      this.articleData.username = username
    //   console.log(this.articleData)
    },
    // 打开视频
    playVideo (videoURL) {
      this.videoIsShow = true
      this.videoURL = videoURL
    },
    // 关闭视频
    closePreVideo () {
      this.videoIsShow = false
    },
    // 搜索
    async search () {
      this.params.page = 1
      this.params = { ...this.params, ...this.paramsInfo }
      await this.getArticleList()
    },
    async reset (id) {
      await this.$refs.searchForm.resetFields()
      this.params = remove(id)
      await this.getArticleList(this.params)
    }
  }
}
</script>

<style scoped >
.video-preview{
      position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 9999;
    }
.video-preview  .close{
      position: relative;
      top: 1%;
      left: 50%;
      width: 50px;
      height: 50px;
      background: rgba(0,0,0,.4);
      border-radius: 50%;
      color: #fff;
      }
 .video-preview .close span{
        position: absolute;
        font-size: 25px;
        top: 25%;
        left: 25%;
        text-align: center;
      }
.box>video{
    position: fixed;
    left: 10%;
    top: 10%;
    width: 80%;
}
</style>
